/*
 * @param string $name     
 * @param map    $styles   style属性的键值对
 * @param string $pseudo   判断是否是伪类选择器 : | ::
 */
 @mixin compatible-style($name, $styles, $pseudo : ''){
    // 名称的兼容性写法
    // eg input::-moz-input-placeholder
    // @include compatible-style("input-placeholder", ("color": #a4a7a9, "letter-spacing": .2rem), "&::");
    @if $name != '' {
      // #{$pseudo + '-moz-' + $name}: $styles;
      // #{$pseudo + '-ms-' + $name}: $styles;
      // #{$pseudo + '-o-' + $name}: $styles;
      // #{$pseudo + '-webkit-' + $name}: $styles;
      // #{$pseudo + $name}: $styles;
      #{$pseudo}-moz-#{$name} {
        @each $style, $value in $styles {
          #{$style}: $value;
        }
      }
      #{$pseudo}-o-#{$name} {
        @each $style, $value in $styles {
          #{$style}: $value;
        }
      }
      #{$pseudo}-ms-#{$name} {
        @each $style, $value in $styles {
          #{$style}: $value;
        }
      }
      #{$pseudo}-webkit-#{$name} {
        @each $style, $value in $styles {
          #{$style}: $value;
        }
      }
      #{$pseudo}#{$name} {
        @each $style, $value in $styles {
          #{$style}: $value;
        }
      }
    }
    // 属性的兼容性写法
    @else{
      @each $style, $value in $styles{
        #{$style}: #{'-moz-' + $value};
        #{$style}: #{'-ms-' + $value};
        #{$style}: #{'-o-' + $value};
        #{$style}: #{'-webkit-' + $value};
        #{$style}: $value;
      }
    }
  }
  